<template>
	<view class="shDetails">
		<view class="tbox-warp">
			<view class="tbox">
				<text>{{ info.status_info }}</text>
				<!-- <text>等待平台确认退款</text> -->
			</view>
		</view>
		<view class="container">
			<view class="card-1 card">
				<text>退款金额</text>
				<text>￥{{ info.money || '' }}</text>
			</view>
			<view class="card-2 card">
				<text class="title">退款信息</text>
				<view class="innerbox">
					<view class="goodlist2">
						<view class="item" v-for="(value, i) in info.product_info" :key="i">
							<image :src="value.image" mode=""></image>
							<view class="rbox">
								<text>{{ value.title }}</text>
								<text>{{ value.key_vals }}</text>
								<view class="row">
									<text>￥{{ value.price_sale }}</text>
									<text>X{{ value.num }}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="formbox">
						<view class="form-item">
							<label>货物状态</label>
							<input v-model="info.delivery_status" disabled type="text" />
						</view>
						<view class="form-item">
							<label>退款原因</label>
							<input v-model="info.reason" disabled type="text" />
						</view>
						<view class="form-item">
							<label>申请时间</label>
							<input v-model="info.dtTime" disabled type="text" />
						</view>
						<view class="form-item">
							<label>退款单号</label>
							<input v-model="info.sn" disabled type="text" />
						</view>

						<view class="form-item" style="flex-direction: column; align-items: flex-start; margin-top: 20rpx">
							<label>描述和凭证</label>
							<view class="content">
								<text>{{ info.remark }}</text>
								<u-album rowCount="3" :urls="info.images"></u-album>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<footer-btn :btnStyle="{ border: '2rpx solid #eff1f6', background: 'transparent', color: '#666666' }" round="40" text="撤销申请" @submit="cxsq"></footer-btn>
	</view>
</template>

<script>
export default {
	name: 'shDetails',
	data() {
		return {
			id: '',
			info: {
				images: []
			}
		};
	},
	onLoad(data) {
		console.log(data, 'shDetails');
		this.id = data.id || 2;
		this.init();
	},
	methods: {
		cxsq() {
			this.j_modal(
				'确认要撤销吗？',
				() => {
					this.$http.getJson('refund1_qxRefund', { id: this.id }).then((res) => {
						const { code, data, message } = res;
						if (code === 1) {
							this.msg(message, () => {
								this.toBack();
							});
						} else {
							this.msg(message);
						}
					});
				},
				true
			);
		},
		init() {
			this.$http.getJson('refund1_detail', { id: this.id }).then((res) => {
				const { code, data, message } = res;
				if (code === 1) {
					this.info = data;
				} else {
					this.msg(message);
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.shDetails {
	.container {
		padding: 24rpx 32rpx;
		.card-2 {
			.scimg {
				margin-top: 34rpx;
				.upimgbox {
					image {
						width: 202rpx;
						height: 198rpx;
						border-radius: 16rpx;
						overflow: hidden;
					}
				}
			}
			.formbox {
				background: #fff;
				padding: 24rpx 0;
				.form-item {
					display: flex;
					align-items: center;
					min-height: 70rpx;
					.j-active();
					.content {
						padding: 10rpx 0;
						width: 100%;
						opacity: 1;
					}
					label {
						width: 200rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #000000;
					}
					text {
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #9695a3;
					}
					input {
						flex: 1;
						// .bor();
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #9695a3;

						text-align: right;
					}
					.edit {
						width: 24rpx;
						height: 24rpx;
						margin-left: 15rpx;
					}
					.right {
						width: 13rpx;
						height: 24rpx;
						margin-left: 24rpx;
					}
				}
			}
			.innerbox {
				// padding: 0 32rpx 16rpx;
				.goodlist {
					.item + .item {
						margin-top: 16rpx;
					}
					.item {
						display: flex;
						align-items: center;
						height: 224rpx;
						padding: 24rpx 0;
						background: #ffffff;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						& > image {
							width: 144rpx;
							height: 144rpx;
							background: #f8f8f8;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
						}
						.rbox {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							flex: 1;
							height: 144rpx;
							margin-left: 24rpx;
							& > text:nth-of-type(1) {
								font-size: 28rpx;
								font-family: PingFang SC-Bold, PingFang SC;
								font-weight: bold;
								color: #000000;
							}
							& > text:nth-of-type(2) {
								font-size: 20rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #999999;
							}

							.row {
								.flex-between();
								& > text:nth-of-type(1) {
									font-size: 28rpx;
									font-family: PingFang SC-Bold, PingFang SC;
									font-weight: bold;
									color: #000000;
								}
								& > text:nth-of-type(2) {
									font-size: 24rpx;
									font-family: PingFang SC-Bold, PingFang SC;
									font-weight: bold;
									color: #000000;
								}
							}
						}
					}
				}
				.goodlist2 {
					background: #ffffff;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					padding: 24rpx 0rpx 0rpx;
					.item + .item {
						border-top: 1px solid #f5f5f5;
					}
					.item {
						display: flex;
						align-items: center;
						height: 170rpx;
						// .bor();
						background: #ffffff;
						& > image {
							width: 144rpx;
							height: 144rpx;
							background: #f8f8f8;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
						}
						.rbox {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							flex: 1;
							height: 144rpx;
							margin-left: 24rpx;
							& > text:nth-of-type(1) {
								font-size: 28rpx;
								font-family: PingFang SC-Bold, PingFang SC;
								font-weight: bold;
								color: #000000;
							}
							& > text:nth-of-type(2) {
								font-size: 20rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #999999;
							}

							.row {
								.flex-between();
								& > text:nth-of-type(1) {
									font-size: 28rpx;
									font-family: PingFang SC-Bold, PingFang SC;
									font-weight: bold;
									color: #000000;
								}
								& > text:nth-of-type(2) {
									font-size: 24rpx;
									font-family: PingFang SC-Bold, PingFang SC;
									font-weight: bold;
									color: #000000;
								}
							}
						}
					}
				}
				.typebox {
					.flex-between();
					padding: 0 24rpx;
					height: 100rpx;
					margin-bottom: 16rpx;
					background: #ffffff;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					.j-active2();
					text:nth-of-type(1) {
						font-size: 32rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #000000;
					}
					input {
						text-align: right;
						font-size: 32rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
					}
					text:nth-of-type(2) {
						font-size: 32rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
					}
				}
			}
		}
		.card-1 {
			.flex-between();
			text:nth-of-type(1) {
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #222222;
			}
			text:nth-of-type(2) {
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #222222;
			}
		}
		.card + .card {
			margin-top: 16rpx;
		}
		.card {
			padding: 24rpx;
			background: #ffffff;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			& > .title {
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #000000;
			}
		}
	}
	.tbox-warp {
		width: 750rpx;
		height: 184rpx;
		padding: 16rpx 32rpx;
		background: #e54e4e;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		.tbox {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			height: 100%;
			padding: 24rpx;
			background: #ffffff;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			text:nth-of-type(1) {
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #000000;
			}
			text:nth-of-type(2) {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
			}
		}
	}
}
</style>
